<template>
  <div class="page home">
    <div class="o-step-1" v-if="alone.steps == 1">
      <div class="form-area clearfix">
        <span class="label fl lh80"
          ><span class="text-warning">*</span>姓名:</span
        >
        <div class="mi-input fl">
          <nut-textinput
            v-model="step1Ajax.data.realName"
            placeholder="请输入姓名"
          />
        </div>
      </div>
      <div class="form-area clearfix">
        <span class="label fl lh80"
          ><span class="text-warning">*</span>电话:</span
        >
        <div class="mi-input fl">
          <nut-textinput
            v-model="step1Ajax.data.contractPhone"
            placeholder="请输入电话"
          />
        </div>
      </div>
      <div class="form-area">
        <nut-textinput
          label="微信："
          v-model="step1Ajax.data.wxNo"
          placeholder="请输入微信"
        />
      </div>
      <div class="form-area">
        <nut-radiogroup v-model="step1Ajax.data.gender">
          <span class="label">性别:</span>
          <nut-radio :label="1">男</nut-radio>
          <nut-radio :label="2">女</nut-radio>
        </nut-radiogroup>
      </div>
      <div class="form-area clearfix">
        <span class="label fl lh80"
          ><span class="text-warning">*</span>身份证:</span
        >
        <div class="mi-input fl">
          <nut-textinput
            v-model="step1Ajax.data.idCard"
            placeholder="请输入身份证"
          />
        </div>
      </div>
      <div class="a-noteTitle">
        <span class="text-warning">*</span>上传照片（最多5张）
      </div>
      <div class="a-upload">
        <ul class="a-uploadList clearfix row">
          <li
            class="a-uploadItem"
            v-for="(item, index) in step1Ajax.data.pics"
            :key="item"
          >
            <div class="respBox">
              <div class="a-thumbnail">
                <img :src="item" alt="" />
              </div>
              <div class="a-deleteImg">
                <div @click="rDeleteImg(index)">
                  <nut-icon type="cross" size="20px"></nut-icon>
                </div>
              </div>
            </div>
          </li>
          <li class="a-uploadItem">
            <div class="respBox">
              <div class="a-uploadBtn">
                <nut-uploader
                  class="a-uploadClick"
                  :name="uploadImgCp.config.name"
                  :clearInput="uploadImgCp.config.clearInput"
                  :url="uploadImgCp.config.url"
                  @success="rUploadImgSuc"
                  @fail="rUploadImgFail"
                >
                </nut-uploader>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="form-area">
        <nut-row>
          <nut-col :span="12" :offset="6">
            <div class="btn btn-info btn-block" @click="rSubmitStep1Form">
              下一步
            </div>
          </nut-col>
        </nut-row>
      </div>
    </div>
    <div class="o-step-2" v-else-if="alone.steps == 2">
      <div class="a-noteTitle">上传视频（最多3个）</div>
      <div class="a-upload">
        <ul class="a-uploadList clearfix row">
          <li
            class="a-uploadItem"
            v-for="(item, index) in step2Ajax.data.videos"
            :key="item"
          >
            <div class="respBox">
              <div class="a-thumbnail">
                <video :src="item"></video>
              </div>
              <div class="a-deleteImg">
                <div @click="rDeleteVideo(index)">
                  <nut-icon type="cross" size="20px"></nut-icon>
                </div>
              </div>
            </div>
          </li>
          <li class="a-uploadItem">
            <div class="respBox">
              <div class="a-uploadBtn">
                <input
                  type="file"
                  class="a-uploadClick"
                  @change="rUploadVideo($event)"
                />
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="mt20">
        <div class="form-area">
          <div class="label">
            <span class="text-warning"></span><span>视频链接：</span>
          </div>
          <nut-button small type="default" @click="rAddVideoLink">
            添加视频链接
          </nut-button>
        </div>
        <div class="pl10 form-horizontal">
          <div
            class="form-area"
            v-for="(item, index) in step2Ajax.data.videoLinks"
            :key="index"
          >
            <div class="label">
              <span class="text-warning"></span
              ><span>视频链接{{ index + 1 }}：</span>
            </div>
            <div class="fieldset fieldset-videoLink">
              <nut-textinput
                v-model="step2Ajax.data.videoLinks[index]"
                label=""
                placeholder=""
              />
              <!-- <input type="text" class="input" /> -->
            </div>
            <div class="btn btn-default ml10" @click="rDeleteVideoLink(index)">
              删除
            </div>
          </div>
        </div>
      </div>
      <div class="mt20">
        <div class="form-area">
          <nut-radiogroup v-model="step2Ajax.data.hasLiveExperience">
            <span class="label">是否有直播经验:</span>
            <nut-radio :label="1">有</nut-radio>
            <nut-radio :label="0">无</nut-radio>
          </nut-radiogroup>
        </div>
        <div class="form-area" v-if="step2Ajax.data.hasLiveExperience">
          <div class="label">
            <span class="text-warning"></span><span>直播经验：</span>
          </div>
          <nut-button small type="default" @click="rAddLiveExp">
            添加直播经验
          </nut-button>
        </div>
        <div class="pl10" v-if="step2Ajax.data.hasLiveExperience">
          <div
            v-for="(item, index) in step2Ajax.data.liveExpEditVoList"
            :key="index"
          >
            <div class="form-area">
              <div class="label">
                <span class="text-warning"></span
                ><span>直播经验{{ index + 1 }}</span>
              </div>
              <nut-button small type="default" @click="rDeleteLiveExp(index)">
                删除
              </nut-button>
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].platfomId"
                label="直播平台："
                placeholder="请输入直播平台："
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].liveId"
                label="直播id："
                placeholder="请输入直播id"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].fansCount"
                label="粉丝数量："
                placeholder="请输入粉丝数量"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].tradeUnion"
                label="原公会："
                placeholder="请输入原公会"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].monthStream"
                label="月流水："
                placeholder="请输入月流水"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].monthIncome"
                label="原待遇："
                placeholder="请输入原待遇"
              />
            </div>
            <div class="form-area">
              <nut-textinput
                v-model="step2Ajax.data.liveExpEditVoList[index].level"
                label="直播等级："
                placeholder="请输入直播等级"
              />
            </div>
            <div class="form-area clearfix">
              <div class="mi-input-f fl">
                <nut-textinput
                  v-model="
                    step2Ajax.data.liveExpEditVoList[index].broadcastYears
                  "
                  label="直播年限："
                  placeholder="请输入直播年限"
                />
              </div>
              <span class="addon fr lh80">年</span>
            </div>
            <div class="form-area clearfix">
              <div class="mi-input-f fl">
                <nut-textinput
                  v-model="
                    step2Ajax.data.liveExpEditVoList[index].totalLiveTime
                  "
                  label="日均直播时长："
                  placeholder="请输入日均直播时长"
                />
              </div>
              <span class="addon fr lh80">小时/日</span>
            </div>
            <div class="a-noteTitle">直播时间段</div>
            <div class="form-area">
              <van-cell
                title="选择开始时间"
                is-link
                :value="
                  step2Ajax.data.liveExpEditVoList[index].liveTimeStart || '无'
                "
                @click="rTriggerLiveTimeStartDatepickerCp(index)"
              />
            </div>
            <div class="form-area">
              <van-cell
                title="选择结束时间"
                is-link
                :value="
                  step2Ajax.data.liveExpEditVoList[index].liveTimeEnd || '无'
                "
                @click="rTriggerLiveTimeEndDatepickerCp(index)"
              />
            </div>
          </div>
        </div>
        <nut-datepicker
          type="time"
          title="请选择时间"
          :isVisible="liveTimeStartDatepickerCp.config.isVisible"
          @choose="rLiveTimeStartDatepickerCpChange"
          @close="rLiveTimeStartDatepickerCpClose"
        >
        </nut-datepicker>
        <nut-datepicker
          type="time"
          title="请选择时间"
          :isVisible="liveTimeEndDatepickerCp.config.isVisible"
          @choose="rLiveTimeEndDatepickerCpChange"
          @close="rLiveTimeEndDatepickerCpClose"
        >
        </nut-datepicker>
      </div>
      <br />
      <br />
      <div class="p10">
        <div>请选择才艺</div>
        <div class="form-area">
          <van-checkbox-group
            v-model="step2Ajax.data.talentSkills"
            direction="horizontal"
          >
            <van-checkbox
              :key="item.id"
              :name="item.id"
              style="margin-top: 10px;"
              v-for="item in talentSkillsSupAjax.data"
              >{{ item.value }}</van-checkbox
            >
          </van-checkbox-group>
          <nut-textinput
            v-model="step2Ajax.data.talentSkillExt"
            label="其他："
            placeholder=""
          />
        </div>
      </div>
      <div>
        <span>发展意向</span>
        <div class="form-area">
          <van-field
            v-model="step2Ajax.data.artistDevIntention"
            rows="1"
            autosize
            label=""
            border
            type="textarea"
            placeholder="请输入发展意向"
          />
        </div>
      </div>

      <div class="a-noteTitle">期望待遇</div>
      <div class="form-area">
        <nut-textinput
          v-model="step2Ajax.data.expectedBaseSalary"
          label="底薪："
          placeholder=""
        />
      </div>
      <div class="form-area">
        <nut-textinput
          v-model="step2Ajax.data.expectedBottomGuard"
          label="保底："
          placeholder=""
        />
      </div>
      <div class="form-area">
        <nut-textinput
          v-model="step2Ajax.data.expectedSigningBonus"
          label="签约金："
          placeholder=""
        />
      </div>
      <div class="form-area">
        <nut-textinput
          v-model="step2Ajax.data.expectedOther"
          label="其他："
          placeholder=""
        />
      </div>
      <div>
        <div class="form-area">
          <nut-radiogroup v-model="step2Ajax.data.deviceOwn">
            <span class="label">是否自带设备:</span>
            <nut-radio :label="1">有</nut-radio>
            <nut-radio :label="0">无</nut-radio>
          </nut-radiogroup>
        </div>
        <div class="p10">
          <div class="form-area">
            <nut-textinput
              v-model="step2Ajax.data.deviceOther"
              label="其他："
              placeholder=""
            />
          </div>
        </div>
      </div>
      <div>
        <div class="form-area clearfix">
          <span class="label1 fl">选择想获得报价的直播平台:</span>
          <!-- <nut-checkbox  @change="checkAll">
              全部
            </nut-checkbox> -->
          <van-checkbox
            v-model="alone.checkAll"
            @change="checkAll"
            shape="square"
            class="fl ml10"
            >全部</van-checkbox
          >
        </div>
      </div>
      <div>
        <van-checkbox-group
          v-model="step2Ajax.data.intentionPlatforms"
          ref="all"
        >
          <nut-scroller class="s-platform">
            <div
              v-for="item in platfomDocSupAjax.data"
              :key="item.id"
              slot="list"
              class="a-item"
            >
              <div class="a-logo">
                <img :src="item.platformIcon" alt="" />
              </div>
              <div class="a-platformTitle">{{ item.platformName }}</div>
              <div class="a-note">
                <p v-if="item.broadcastTime">
                  直播时长：{{ item.broadcastTime }}
                </p>
                <p v-if="item.treatment">待遇：{{ item.treatment }}</p>
                <p v-if="item.recruitMark">标准：{{ item.recruitMark }}</p>
              </div>
              <div class="a-checkbox">
                <van-checkbox :name="item.platformId"></van-checkbox>
                <!-- <nut-checkbox v-model="checkbox1"> </nut-checkbox> -->
              </div>
            </div>
          </nut-scroller>
        </van-checkbox-group>
      </div>
      <div class="form-area">
        <nut-row>
          <nut-col :span="12" :offset="6">
            <div class="btn btn-info btn-block mt20" @click="rSubmitStep2Form">
              提交
            </div>
          </nut-col>
        </nut-row>
      </div>
    </div>
    <div class="o-step-3" v-else>
      <div class="a-icon">
        <nut-icon type="tick" color="#11e517" size="30px"> </nut-icon>
      </div>
      <div class="a-text">提交成功，请等待工作人员联系</div>
    </div>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from "@/components/HelloWorld.vue";
import { Cell } from "vant";
import "vant/lib/cell/style";
import {
  addActorStep1,
  addActorStep2,
  visit,
  uploadVideo,
  getSkillList,
  getPlatfomDocList
} from "@/api/visitor.js";
// import _ from "lodash";
export default {
  name: "Home",
  components: { vanCell: Cell },
  data() {
    return {
      step1Ajax: {
        loading: false,
        data: {
          channelId: 0,
          contractPhone: "",
          gender: 2,
          idCard: "",
          realName: "",
          nickName: "",
          pics: [],
          wxNo: ""
        }
      },
      step2Ajax: {
        loading: false,
        data: {
          anchorId: 1,
          artistDevIntention: "",
          deviceOther: "",
          deviceOwn: 0,
          expectedBaseSalary: "",
          expectedBottomGuard: "",
          expectedOther: "",
          expectedSigningBonus: "",
          hasLiveExperience: 0,
          intentionPlatforms: [],
          liveExpEditVoList: [],
          talentSkillExt: "",
          talentSkills: [],
          videoLinks: [],
          videos: []
        }
      },
      talentSkillsSupAjax: {
        data: []
      },
      platfomDocSupAjax: {
        data: []
      },
      alone: {
        steps: 1,
        currentLiveExpIndex: 0,
        anchorId: 0,
        checkAll: 0
      },

      uploadImgCp: {
        config: {
          name: "file",
          url: "/bs/upload",
          clearInput: true
        }
      },
      uploadVideoCp: {
        config: {
          name: "file",
          url: "/bs/upload",
          clearInput: true,
          acceptType: ["*"]
        }
      },
      talentSkillsPickerCp: {
        config: {
          isVisible: false
        }
      },
      liveTimeStartDatepickerCp: {
        config: {
          isVisible: false
        }
      },
      liveTimeEndDatepickerCp: {
        config: {
          isVisible: false
        }
      }
      // val: "",
      // radioGroupVal1: "",
      // defaultValueData1: [],
      // listData1: [],
      // checkbox1: ""
    };
  },
  created() {
    const data = {
      channelId: this.$route.query.channelId || "",
      mid: this.$route.query.mid || ""
    };
    // 浏览统计
    visit(data);
    this.getSkillListData();
    this.getPlatfomDocListData();
    this.getPlatfomDocListData();
  },
  methods: {
    checkAll(v) {
      if (v) {
        this.$refs.all.toggleAll(true);
      } else {
        this.$refs.all.toggleAll(false);
      }
    },
    rUploadImgSuc(f, resp) {
      let _that = this;

      if (_that.step1Ajax.data.pics.length >= 5) {
        _that.$toast.fail("最多能上传5张图片，请删除后再上传");
        return;
      }
      resp = typeof resp == "string" ? JSON.parse(resp) : resp;
      let respData = resp.data || {};
      if (resp.code === _that.STATUS.success[0]) {
        _that.step1Ajax.data.pics.push(respData.fileUrl);
        _that.$toast.success(respData.msg || "上传成功");
      } else {
        _that.$toast.fail(respData.msg || "上传失败");
      }
    },
    rUploadImgFail() {
      this.$toast.success("上传失败");
    },
    rDeleteImg(index) {
      let _that = this;
      _that.$dialog({
        title: "确定删除此图片？",
        onOkBtn() {
          _that.step1Ajax.data.pics.splice(index, 1);
          this.close(); //关闭对话框
        }
      });
    },
    rUploadVideo(val) {
      let _that = this;

      if (_that.step2Ajax.data.videos.length >= 3) {
        _that.$toast.fail("最多能上传3个图片，请删除后再上传");
        return;
      }
      let formData = new FormData();
      formData.append("file", val.target.files[0]);
      uploadVideo(formData)
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.step2Ajax.data.videos.push(respData.data.fileUrl);
            _that.$toast.success(respData.msg || "上传成功");
          } else {
            _that.$toast.fail(respData.msg || "上传出现错误");
          }
        })
        .finally(() => {
          _that.step2Ajax.loading = false;
          val.target.value = "";
        });
    },
    rDeleteVideo(index) {
      let _that = this;
      _that.$dialog({
        title: "确定删除此视频？",
        onOkBtn() {
          _that.step2Ajax.data.videos.splice(index, 1);
          this.close(); //关闭对话框
        }
      });
    },
    rAddVideoLink() {
      this.step2Ajax.data.videoLinks.push("");
    },
    rDeleteVideoLink(index) {
      let _that = this;
      //let videoLinks = _.cloneDeep(_that.step2Ajax.data.videoLinks);
      _that.$dialog({
        title: "确定删除此视频链接？",
        onOkBtn() {
          _that.step2Ajax.data.videoLinks.splice(index, 1);
          //_that.step2Ajax.data.videoLinks = videoLinks;
          // console.log(_that.step2Ajax.data.videoLinks)
          this.close(); //关闭对话框
        }
      });
    },
    rAddLiveExp() {
      let liveExpEditVoItem = {
        fansCount: "",
        level: "",
        liveId: "",
        liveTimeEnd: "",
        liveTimeStart: "",
        monthIncome: "",
        monthStream: "",
        platfomId: "",
        totalLiveTime: "",
        tradeUnion: ""
      };
      this.step2Ajax.data.liveExpEditVoList.push(liveExpEditVoItem);
    },
    rDeleteLiveExp(index) {
      let _that = this;
      //let videoLinks = _.cloneDeep(_that.step2Ajax.data.videoLinks);
      _that.$dialog({
        title: "确定删除此直播经验？",
        onOkBtn() {
          _that.step2Ajax.data.liveExpEditVoList.splice(index, 1);
          //_that.step2Ajax.data.videoLinks = videoLinks;
          // console.log(_that.step2Ajax.data.videoLinks)
          this.close(); //关闭对话框
        }
      });
    },
    rTriggerTalentSkillsPickerCp() {
      this.talentSkillsPickerCp.config.isVisible = true;
    },
    rTriggerLiveTimeStartDatepickerCp(index) {
      this.alone.currentLiveExpIndex = index;
      this.liveTimeStartDatepickerCp.config.isVisible = true;
    },
    rLiveTimeStartDatepickerCpChange(e) {
      let t = e[2];
      this.step2Ajax.data.liveExpEditVoList[
        this.alone.currentLiveExpIndex
      ].liveTimeStart = t;
      // this.step2Ajax.data.
    },
    rLiveTimeStartDatepickerCpClose() {
      this.liveTimeStartDatepickerCp.config.isVisible = false;
    },

    rTriggerLiveTimeEndDatepickerCp(index) {
      this.alone.currentLiveExpIndex = index;
      this.liveTimeEndDatepickerCp.config.isVisible = true;
    },
    rLiveTimeEndDatepickerCpChange(e) {
      let t = e[2];
      this.step2Ajax.data.liveExpEditVoList[
        this.alone.currentLiveExpIndex
      ].liveTimeEnd = t;
    },
    rLiveTimeEndDatepickerCpClose() {
      this.liveTimeEndDatepickerCp.config.isVisible = false;
    },
    rSubmitStep1Form() {
      let _that = this;
      let formData = _that.step1Ajax.data;
      if (_that.step1Ajax.loading) {
        return;
      }

      if (!formData.realName) {
        _that.$toast.fail("姓名不能为空");
        return;
      }
      if (!formData.contractPhone) {
        _that.$toast.fail("电话不能为空");
        return;
      }
      if (!formData.idCard) {
        _that.$toast.fail("身份证不能为空");
        return;
      }
      if (!formData.pics.length) {
        _that.$toast.fail("图片不能为空，最少上传一张图片");
        return;
      }
      let channelId = _that.$route.query.channelId || 33;
      formData.channelId = channelId;
      formData.nickName = formData.realName;
      const mid = _that.$route.query.mid;
      if (mid) {
        formData.channelMaterialId = mid;
      }
      _that.step1Ajax.loading = true;
      addActorStep1(formData)
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            // _that.$$toast.success(respData.msg || "登陆出现错误");
            // _that.getUserInfo();
            _that.alone.steps = 2;
            _that.alone.anchorId = respData.data;
          } else {
            _that.$toast.fail(respData.msg || "提交出现错误");
          }
        })
        .finally(() => {
          setTimeout(() => {
            _that.step1Ajax.loading = false;
          }, 2000);
        });
    },
    rSubmitStep2Form() {
      let _that = this;
      let formData = _that.step2Ajax.data;
      if (_that.step2Ajax.loading) {
        return;
      }

      if (!formData.videos) {
        _that.$toast.fail("视频不能为空，最少上传一个视频");
        return;
      }
      if (formData.videoLinks && formData.videoLinks.length > 0) {
        for (let i = formData.videoLinks.length; i--; ) {
          if (!formData.videoLinks[i]) {
            _that.$toast.fail("视频链接" + (i + 1) + "不能为空");
            return;
          }
        }
      }

      if (formData.hasLiveExperience) {
        if (!formData.liveExpEditVoList.length) {
          _that.$toast.fail("直播经验不能为空");
          return;
        }

        for (let i = formData.liveExpEditVoList.length; i--; ) {
          if (!formData.liveExpEditVoList[i].platfomId) {
            _that.$toast.fail("直播" + (i + 1) + "平台不能为空");
            return;
          }
          if (!formData.liveExpEditVoList[i].liveId) {
            _that.$toast.fail("直播" + (i + 1) + "id不能为空");
            return;
          }
        }
      } else {
        formData.liveExpEditVoList.length = 0;
      }
      if (!formData.talentSkills) {
        _that.$toast.fail("才艺不能为空");
        return;
      }

      let channelId = _that.$route.query.channelId || 1;
      formData.channelId = channelId;
      formData.anchorId = _that.alone.anchorId;

      _that.step2Ajax.loading = true;
      addActorStep2(formData)
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.alone.steps = 3;
            _that.$toast.success(respData.msg || "提交成功");
          } else {
            _that.$toast.fail(respData.msg || "提交出现错误");
          }
        })
        .finally(() => {
          setTimeout(() => {
            _that.step2Ajax.loading = false;
          }, 2000);
        });
    },

    getSkillListData() {
      let _that = this;
      getSkillList()
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.talentSkillsSupAjax.data = respData.data;
          } else {
            _that.$toast.fail(respData.msg || "提交出现错误");
          }
        })
        .finally(() => {});
    },
    getPlatfomDocListData() {
      let _that = this;
      let channelId = _that.$route.query.channelId || 1;

      getPlatfomDocList({ params: { channelId: channelId } })
        .then(resp => {
          let respData = resp.data || {};
          if (respData.code === _that.STATUS.success[0]) {
            _that.platfomDocSupAjax.data = respData.data.list;
          } else {
            _that.$toast.fail(respData.msg || "提交出现错误");
          }
        })
        .finally(() => {});
    }
  }
};
</script>
<style lang="scss" scoped>
.page {
  padding: 20px;
  font-size: 24px;
  .form-area {
    margin-bottom: 20px;
  }

  .a-upload {
  }
  .a-uploadList {
  }
  .a-uploadItem {
    position: relative;
    float: left;
    width: 33.33%;
    padding: 10px;
    box-sizing: border-box;
  }
  .a-thumbnail {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .a-uploadItem img,
  .a-uploadItem video {
    width: 100%;
    height: 100%;
  }
  .a-deleteImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    // display: flex;
    // align-items: center;
    div {
      position: absolute;
      right: 0;
      top: 0;
      padding: 5px;
      color: #ff0000;
    }
  }
  .a-uploadBtn {
    position: absolute;
    left: 0;
    top: 0;
    // margin: 15px 15px 0 0;
    width: 100%;
    height: 100%;
    background-color: #ededed;
  }
  .a-uploadBtn:before,
  .a-uploadBtn:after {
    content: " ";
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #a3a3a3;
  }
  .a-uploadBtn:before {
    width: 2px;
    height: 32px;
  }
  .a-uploadBtn:after {
    width: 32px;
    height: 2px;
  }
  .a-uploadClick {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
  }
  .a-platformTitle {
    text-align: center;
    font-weight: 700;
  }
  .a-noteTitle {
    line-height: 2;
    color: #000;
    margin-top: 15px;
  }
  .btn-block {
    display: block;
  }
  .o-step-1 {
  }
  .a-noteTitle {
    line-height: 2;
    color: #000;
    margin-top: 15px;
  }

  .s-platform {
    .a-item {
      position: relative;
      float: left;
      width: 150px;
      padding: 5px;
      border: 1px solid #eee;
      margin-right: 10px;
      box-shadow: 0 2px 10px #ededed;
    }
    .a-logo {
      height: 50px;
      width: 100%;
      img {
        display: block;
        height: 100%;
        width: auto;
        margin: 0 auto;
      }
    }
    .a-note {
      margin-top: 5px;
      padding: 5px;
      // height: 110px;
      // overflow: scroll;
      p {
        margin-top: 5px;
      }
    }
    .a-checkbox {
      position: absolute;
      right: 2px;
      top: 2px;
    }
  }
  .o-step-3 {
    margin-top: 200px;
    text-align: center;
    .a-icon {
    }
    .a-text {
      margin-top: 20px;
    }
  }
}
</style>
<style lang="scss">
.home {
  $labelWidth: 160px;
  .nut-textinput-label {
    width: $labelWidth;
    text-align: right;
  }
  .mi-input {
    width: 500px;
  }
  .mi-input-f {
    width: 550px;
  }
  .label {
    display: inline-block;
    width: $labelWidth;
    text-align: right;
    padding-right: 10px;
    box-sizing: border-box;
  }
  .fieldset-videoLink input {
    padding-right: 0;
  }
  .addon {
    width: 95px;
  }
  .lh80 {
    line-height: 80px;
  }
  .text-warning {
    color: #ff0000;
  }
}
</style>
